<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>gzdk</title>

  <link rel="stylesheet" href="./assets/css/index.css">
  <link rel="stylesheet" href="./liNone.css">
  <!-- <script type="text/javascript" src="./assets/js/index.js"></script> -->

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <style type="text/css">
    /* 覆盖样式 */
    .white {
      color: white;
    }

    li {
      list-style-type: none;
    }

    .top {
      /* 缩略图	缩小3倍
          宽高之比:1.6
          缩略图是小放大镜的两倍 */
      /* width: 640px;
        height: 400px; */
      width: 282.5px;
      height: 282.5px;

      border: 1px solid;
      position: relative;
    }

    .top img {
      width: 100%;
      height: 100%;
    }

    /* 小放大镜 */
    .mark {
      width: 141px;
      height: 141px;
      background-color: #444;
      opacity: 0.5;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }

    .bottom img {
      /* 原图 */
      width: 564px;
      height: 564px;
      position: absolute;
      left: 0;
      top: 0;
    }

    /* 大放大镜 */
    .bottom {
      background-color: #ffffff;
      z-index: 55;
      width: 282px;
      height: 282px;
      border: 2px solid;
      position: relative;
      overflow: hidden;
      display: none;
    }



    /* a标签 */
    /*  去除所有A标签样式*/
    /*  */
    /*去除a标签下划线*/
    a {
      text-decoration: none;
    }

    /*去除未被访问的a标签的下划线*/
    a:link {
      text-decoration: none;
    }

    /*去除已经被访问过的a标签的下划线*/
    a:visited {
      text-decoration: none;
    }

    /*去除鼠标悬停时的a标签的下划线*/
    a:hover {
      text-decoration: none;
    }

    /*去除正在点击的a标签的下划线（鼠标按下，尚未松开）*/
    a:active {
      text-decoration: none;
    }

    /*去除获得焦点的a标签的下划线（被鼠标点击过）*/
    a:focus {
      text-decoration: none;
    }

    /* 底部 */

    /* 底部 */



    .change {}

    .change:hover .outer {
      display: block;
    }

    .language {
      display: flex;
      position: absolute;
      top: 35px;
      left: 22px;
      flex-direction: column;
    }

    .outer {
      display: none;
    }

    /* 三角形 */
    .trangle {
      width: 0px;
      height: 0px;
      border-top: 10px solid #666666;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
    }
  </style>

</head>

<body>
  <div class="top-container">
    <div class="container">
      <div class="top-container-left">
        <div><a></a></div>
      </div>
      <div class="top-container-right">
        <div><a href="./login.html">登录</a></div>
        <div><a href="./register.html">免费注册</a></div>
        <div><a href="./private.html">个人详情</a></div>
        <div><a href="./navigation.html">网站导航</a></div>
        <div><a href="./help.html">帮助</a></div>

        <div class="change" style="position:relative ;">
          <a href="javascript:;">切换语言<div class="trangle" style="top: 15px;
            position: absolute;
            left: 80px;"></div>
            <div class="outer" style="padding: 0px;">
              <div class="language">
                <li style="border-bottom: 1px solid;">Chinese</li>
                <li style="border-bottom: 1px solid;">English</li>
                <li style="border-bottom: 1px solid;">Japanese</li>
                <li style="border-bottom: 1px solid;">French</li>
              </div>
            </div>
          </a>


        </div>
      </div>
    </div>
  </div>
  <div class="mod-shopsigns">
    <div class="container">
      <div class="company-logo">
        <img src="./assets/img/ptlogo.png" alt="">
      </div>
      <div class="company-name">
        <p>广州东控机电设备有限公司</p>
        <span>主营：工控电器销售,PLC,工控电器售后编程调试</span>
      </div>
    </div>
  </div>
  <div class="index-nav">
    <div class="container">
      <div id="nav">
        <div onclick="showNav2()" class="home"><a href="javascript:;">Home</a></div>
        <div onclick="showNav2()" class="prodouct"><a href="javascript:;">Prodouct</a></div>
        <div onclick="showNav2()" class="aboutus"><a href="javascript:;">About Us</a></div>
        <div onclick="showNav2()" class="servies"><a href="javascript:;">Services</a></div>
        <div onclick="showNav2()" class="contact"><a href="javascript:;">Contact</a></div>
      </div>
      <div id="showNav" onclick="showNav()">Show Nav</div>
    </div>
  </div>
  <div class="box" style="background-color: #f6f6f6;">
    <div class="container" style="
    background:white;display: flex;height:600px ;padding-top: 50px; position: relative;">
      <!-- 放大 -->
      <div>
        <div class="app" style="display:flex;">
          <div class="top">
            <!-- 缩略图 -->
            <img src="https://www.jotrin.com/userfiles/images/packages/DIP8.jpg">
            <!-- 小放大镜 -->
            <div class="mark"></div>
          </div>
          <!-- 大放大镜 -->
          <div class="bottom">
            <img src="https://www.jotrin.com/userfiles/images/packages/DIP8.jpg">
          </div>
        </div>
      </div>
      <!-- 表格 -->

      <div style="position: absolute; top: -30px;
      left: 400px;
       ;">

        <div class="title" style="display: flex;
                      position: relative;
                      ">
          <h1 style="    font-size: 16px;
                        font-weight: 700;">DNP015NA</h1>
          </a>
        </div>
        <p style="text-align:left ;">集成电路(IC) DIP8</p>
        <ul class="list-group row" style="overflow: hidden;">
          <li class="list-group-item col-md-4" style="background: #f9f9f9;float:left ; ">制造商 : </li>
          <li class="list-group-item col-md-8" style="float: right; white-space: nowrap;">
            <a href="./manufacturer.html">
              ITE Tech. Inc.</a>
          </li>
        </ul>
        <ul class="list-group  row" style="overflow: hidden;">
          <li class="list-group-item col-md-4" style="background: #f9f9f9;float:left ;">封装/规格 : </li>
          <li class="list-group-item col-md-8" style="float: right;">DIP8
          </li>
        </ul>
        <ul class="list-group  row" style="overflow: hidden;">
          <li class="list-group-item col-md-4" style="background: #f9f9f9;float:left ;">产品分类 : </li>
          <li class="list-group-item col-md-8" style="float: right;">集成电路(IC)
          </li>
        </ul>
        <ul class="list-group  row" style="overflow: hidden;">
          <li class="list-group-item col-md-4" style="background: #f9f9f9;float:left ;">Datasheet: </li>
          <li class="list-group-item col-md-8" style="float: right;">DNP015NA Datasheet (PDF)
          </li>
        </ul>

        <ul class="list-group  row" style="overflow: hidden;">
          <li class="list-group-item col-md-4" style="background: #f9f9f9;float:left ;"> Status:</li>
          <li class="list-group-item col-md-8" style="float: right;">Lead free/RoHS Compliant
          </li>
        </ul>

        <ul class="list-group  row" style="overflow: hidden;">
          <li class="list-group-item col-md-4" style="background: #f9f9f9;float:left ;">库存:</li>
          <li class="list-group-item col-md-8" style="float: right;">60
          </li>
        </ul>





        <div>
          <span style="
                        font-weight: 700;
                    ">数量</span>
          &nbsp;&nbsp;

          <input type="number" style="height: 40px;">
          &nbsp;&nbsp;

          <button type="button" class="btn btn-danger">询价</button>
        </div>





      </div>
      <!-- 表单 -->
      <div style="width: 400px;  border: 1px solid #b3d9e6;position: absolute;left: 730px;top: 45px;; 
                    border-radius: 3px;
                    background: #fff;">

        <div>


          <div class="head" style="    background-color: #b3d9e6;
                       
                        border-top-right-radius: 3px;
                        border-top-left-radius: 3px;
                        padding-left: 20px;
                        padding-top: 10px;
                        padding-bottom: 10px;">
            <p class="white" style="margin: 0px;
                          font-weight: 700;
                          text-align: left;
                          ">在线询价</p>
          </div>
          <form>
            <p style="    padding: 0 15px;
                          margin: 10px 0;
                          font-size: 10px;">温馨提示: 请填写以下信息，以便客户代表及时与您沟通库存数量和价格回复结果。</p>


            <ul>
              <li style="margin: 0 15px;
                            position: relative;">
                <i style="width: 16px;
                              height: 16px;
                              background: url(./image/details_icon.png) no-repeat;
                              left: 7px;
                              top: 10px;
                              position: absolute;"></i>
                <input type="number" placeholder="选购数量" style="text-indent: 10px;
                              line-height: 30px;
                              width: 100%;
                          
                          
                              border: none;
                              border-bottom: 1px solid #ccc;
                              height: 36px;
                              padding-left: 35px;
                              box-sizing: border-box;
                              -moz-box-sizing: border-box;
                              -webkit-box-sizing: border-box;
                              width: 100%;
                          
                          
                          
                          font-family: inherit;
                              font-size: inherit;
                              font-weight: inherit;
                              outline: 0;
                              border-radius: 0;">
              </li>
              <li style="margin: 0 15px;
                            position: relative;">
                <i style="width: 16px;
                              height: 16px;
                              background: url(./image/details_icon.png) no-repeat;
                              background-position: 0px -47px;
                              left: 7px;
                              top: 10px;
                              position: absolute;
                              
                              
                              "></i>
                <input type="text" placeholder="联系人" style="text-indent: 10px;
                              line-height: 30px;
                              width: 100%;
                              border: none;
                              border-bottom: 1px solid #ccc;
                              height: 36px;
                              padding-left: 35px;
                              box-sizing: border-box;
                              -moz-box-sizing: border-box;
                              -webkit-box-sizing: border-box;
                              width: 100%;
                          
                          
                          
                          font-family: inherit;
                              font-size: inherit;
                              font-weight: inherit;
                              outline: 0;
                              border-radius: 0;">
              </li>
              <li style="margin: 0 15px;
                            position: relative;">
                <i style="width: 16px;
                              height: 16px;
                              background: url(./image/details_icon.png) no-repeat;
                              background-position: 0px -94px;
                              left: 7px;
                              top: 10px;
                              position: absolute;
                              "></i>
                <input type="text" placeholder="邮箱" style="text-indent: 10px;
                              line-height: 30px;
                              width: 100%;
                              border: none;
                              border-bottom: 1px solid #ccc;
                              height: 36px;
                              padding-left: 35px;
                              box-sizing: border-box;
                              -moz-box-sizing: border-box;
                              -webkit-box-sizing: border-box;
                              width: 100%;
                          
                          
                          
                          font-family: inherit;
                              font-size: inherit;
                              font-weight: inherit;
                              outline: 0;
                              border-radius: 0;">
              </li>

              <li style="margin: 0 15px;
                            position: relative;">
                <i style="width: 16px;
                              height: 16px;
                              background: url(./image/details_icon.png) no-repeat;
                              background-position: 0px -138px;
                              left: 7px;
                              top: 10px;
                              position: absolute;
                              "></i>
                <input type="text" placeholder="电话" style="text-indent: 10px;
                              line-height: 30px;
                              width: 100%;
                              border: none;
                              border-bottom: 1px solid #ccc;
                              height: 36px;
                              padding-left: 35px;
                              box-sizing: border-box;
                              -moz-box-sizing: border-box;
                              -webkit-box-sizing: border-box;
                              width: 100%;
                          
                          
                          
                          font-family: inherit;
                              font-size: inherit;
                              font-weight: inherit;
                              outline: 0;
                              border-radius: 0;">
              </li>

              <li style="margin: 0 15px;
                            position: relative;">
                <i style="width: 16px;
                              height: 16px;
                              background: url(./image/details_icon.png) no-repeat;
                              background-position: 0px -184px;
                              left: 7px;
                              top: 10px;
                              position: absolute;
                              "></i>
                <input type="text" placeholder="公司" style="text-indent: 10px;
                              line-height: 30px;
                              width: 100%;
                              border: none;
                              border-bottom: 1px solid #ccc;
                              height: 36px;
                              padding-left: 35px;
                              box-sizing: border-box;
                              -moz-box-sizing: border-box;
                              -webkit-box-sizing: border-box;
                              width: 100%;
                          
                          
                          
                          font-family: inherit;
                              font-size: inherit;
                              font-weight: inherit;
                              outline: 0;
                              border-radius: 0;">
              </li>


              <li style="margin: 0 15px;
                            position: relative;">
                <i style="width: 16px;
                              height: 16px;
                              background: url(./image/details_icon.png) no-repeat;
                              background-position: 0px -232px;
                              left: 7px;
                              top: 10px;
                              position: absolute;
                              "></i>
                <input type="textarea" placeholder="内容" style="text-indent: 10px;
                              line-height: 30px;
                              width: 100%;
                              border: none;
                              border-bottom: 1px solid #ccc;
                              height: 36px;
                              padding-left: 35px;
                              box-sizing: border-box;
                              -moz-box-sizing: border-box;
                              -webkit-box-sizing: border-box;
                              width: 100%;
                          font-family: inherit;
                              font-size: inherit;
                              font-weight: inherit;
                              outline: 0;
                              border-radius: 0;">
              </li>

              <li style="display: flex;
              padding: 20px;
              justify-content: center;">
                <button aria-hidden="true" type="button" class="glyphicon glyphicon-envelope  btn btn-info">
                  发送询价
                </button>
              </li>

            </ul>



          </form>
        </div>



      </div>

    </div>

    <div class="container" style="margin: 0 auto; width: 1200px;margin-top: 20px;">

      <div style="border: 1px solid #b3d9e6;
      border-radius: 3px;
      background: #fff;">
        <div>
          <div class="head" style="    background-color: #b3d9e6;
              color: #fff;
              border-top-right-radius: 3px;
              border-top-left-radius: 3px;
              padding-left: 20px;
              padding-top: 10px;
              padding-bottom: 10px;">
            <p class="white" style="margin: 0px;
                font-weight: 700;
                text-align: left;
                ">产品详情</p>
          </div>
          <div class="content" style="padding: 10px;">
            <p style="    text-align: start;
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            overflow-wrap: break-word;">The FAN7930B is an active power factor correction (PFC) controller for
              boost PFC applications that
              operate in critical conduction mode (CRM). It uses a voltage-mode PWM that compares an internal ramp
              signal with the error amplifier output to generate a MOSFET turn-off signal. Because the voltage-mode
              CRM PFC controller does not need rectified AC line voltage information, it saves the power loss of an
              input voltage sensing network necessary for a current-mode CRM PFC controller.</p>
            <p style="text-align: start;">Applications �� Adapter �� Ballast �� LCD TV, CRT TV �� SMPS</p>
            <div style="text-align: center;width: 50%;
            text-align: center;
            height: 50%;
            translate: 50%;">
              <img style="max-width: 600px !important;"
                src=" https://www.jotrin.com/productFiles/b/201603/FAN7930B-53327.jpg" alt="">
            </div>
            <p style="text-align: start;">�� Additional OVP Detection Pin �� Input Voltage Absent Detection Circuit
              �� Maximum Switching
              Frequency Limitation �� Internal Soft-Start and Overshoot-less Control �� Internal Total Harmonic
              Distortion (THD) Optimizer �� Precise Adjustable Output Over-Voltage Protection �� Open-Feedback
              Protection and Disable Function �� Zero Current Detector �� 150μs Internal Startup Timer �� MOSFET
              Over-Current Protection �� Under-Voltage Lockout with 3.5V Hysteresis �� Low Startup and Operating
              Current �� Totem-Pole Output with High State Clamp �� +500/-800mA Peak Gate Drive Current �� 8-Pin
              Small Outline Package (SOP)</p>
          </div>
        </div>
      </div>



    </div>

















  </div>



  <div class="footer">
    <div class="footer-container">
      <div class="copyright">
        <ul class="helpLink">
          <li>
            关于我们
            <span class="space"></span>
          </li>
          <li>
            联系我们
            <span class="space"></span>
          </li>
          <li>
            帮助
            <span class="space"></span>
          </li>
          <li>
            友情链接
            <span class="space" style="
                border-left: 0px solid #666;
    width: 1px;
    height: 13px;
    background: #666;
    margin: 8px 10px;
            "></span>
          </li>
        </ul>
        <p>地址：北京市昌平区宏福科技园综合楼6层</p>
        <p>京ICP备19006430号</p>
      </div>
    </div>
  </div>
  <div class="goTop" onclick="scrollIntoViewTop('html')"></div>
</body>
<link rel="stylesheet/less" href='./footer.less'>
<script src="./js/jquery-3.6.1.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.3/less.min.js"></script>
<script type="text/javascript">
  $('.home').on('click', function (e) {
    window.location.href = "index.html"
  })
  $('.prodouct').on('click', function (e) {
    window.location.href = "product.html"
  })
  $('.aboutus').on('click', function (e) {
    window.location.href = "aboutUs.html"
  })
  $('.servies').on('click', function (e) {
    window.location.href = "news.html"
  })
  $('.contact').on('click', function (e) {
    window.location.href = "contact.html"
  })




  /* 放大镜原理:
    原图宽高比例=缩略图宽高比例=放大镜宽高比例
    原图与大放大镜倍数比例=缩略图与小放大镜倍数比例
    小放大镜移动方式与原图移动方向相反,原图移动距离=-小放大镜移动距离*倍数 */
  //获取top节点
  var _top = document.querySelector(".top");
  // 获取小放大镜节点
  var _mark = document.querySelector(".mark");
  //获取原图节点
  var _rimg = document.querySelector(".bottom img");
  //获取bottom节点
  var _bottom = document.querySelector(".bottom");

  //鼠标悬停显示放大镜和原图
  _top.onmouseover = function () {
    _mark.style.display = "block";
    _bottom.style.display = "block";
  }
  // 鼠标离开时隐藏放大镜和原图
  _top.onmouseout = function () {
    _mark.style.display = "none";
    _bottom.style.display = "none";
  }

  // onmousemove:鼠标跟随事件
  _top.onmousemove = function (event) {

    //1.计算小放大镜的移动位置	//clientX	clientY：获取鼠标点距离浏览器的坐标
    //offsetLeft：距离左偏移量	clientWidth：可视宽
    // var dx = event.clientX - _top.offsetLeft - _mark.clientWidth / 2;
    // var dy = event.clientY - _top.offsetTop - _mark.clientHeight / 2;
    var dx = event.clientX - _top.getBoundingClientRect().left - _mark.offsetLeft / 2;
    var dy = event.clientY - _top.getBoundingClientRect().top - _mark.offsetHeight / 2;


    // console.log(event.clientX, 'event.clientX'); //鼠标距离游览器窗口的距离
    // console.log(_top.offsetLeft, '_top.offsetLeft'); //包裹的父容器距离游览器窗口的距离
    // console.log(_mark.clientWidth, '_mark.clientWidth'); //蒙版的宽度
    // console.log(dx,"dx");
    
    //到最左边
    if (dx <= 0) {
      dx = 0;
    }
    //到最右边
    if (dx >= _top.clientWidth - _mark.offsetWidth) {
      dx = _top.clientWidth - _mark.offsetWidth;
    }

    //小放大镜的左、上距离
    _mark.style.left = dx  + "px";

    //到最上边
    if (dy <= 0) {
      console.log('22');
      dy = 0;
    }
    //到最下边
    if (dy >= _top.clientHeight - _mark.offsetHeight) {
      dy = _top.clientHeight - _mark.offsetHeight;
    }
    _mark.style.top = dy + "px";
    //2.根据小放大镜的移动位置改变原图位置		原图是缩略图的3倍
    _rimg.style.left = -3 * dx + "px";
    _rimg.style.top = -3 * dy + "px";
  }
</script>

</html>